<script setup lang="ts">
// import { ref } from 'vue';

/*
  v-for = (item, index) in arr
*/

// 数组
const hobby = ['篮球', '羽毛球', '乒乓球', '足球']
const persons = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 }
]
const str = 'zhangsanfeng'

</script>


<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in hobby" :key="index">{{ index }} - {{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in persons" :key="item.id">
        姓名: {{ item.name }}, 年龄: {{ item.age }}
      </li>
    </ul>
    <ul>
      <li v-for="(s, index) in str" :key="index">{{ s }}</li>
    </ul>
    <ul>
      <li v-for="item in 20" :key="item">{{ item }}</li>
    </ul>

  </div>
</template>

<style></style>
